<template>
    <div class="app-container">
        <!-- 企业画像1 -->
        <div class="main">
            <h1>企业画像管理</h1>
            <div class="search">
                <!-- <el-input placeholder="" v-model="value" clearable>
                    <span slot="append" @click="handleSearch">查询</span>
                </el-input> -->
                <el-autocomplete
                    v-model="value"
                    style="width:100%"
                    clearable
                    class="autocomplete"
                    size="large"
                    :fetch-suggestions="querySearchAsync"
                    :trigger-on-focus="false"
                    @select="handleSearch"
                    placeholder="请输入企业名称或社会统一信用代码"
                >
                    <span slot="append" @click="handleSearch">查询</span>
                </el-autocomplete>
            </div>
            <div class="history">
                <svg t="1644214534503" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1290" width="16" height="16"><path d="M320.997969 1024c-68.253867-142.011562-31.903003-223.385019 20.543358-300.022624 57.438205-83.965376 72.253742-167.066779 72.253742-167.066779s45.150589 58.686166 27.103153 150.491297c79.773507-88.797225 94.813037-230.264804 82.781413-284.439111 180.314365 126.012062 257.367957 398.835536 153.531202 601.037218 552.366739-312.534233 137.403706-780.135621 65.149964-832.837974 24.095247 52.670354 28.639105 141.851567-19.999375 185.114215-82.333427-312.278241-285.975063-376.276241-285.975063-376.276241 24.095247 161.050967-87.293272 337.141464-194.681916 468.721352-3.775882-64.221993-7.775757-108.540608-41.534702-169.978688-7.583763 116.668354-96.732977 211.737383-120.860223 328.62973-32.702978 158.267054 24.479235 274.167432 241.752445 396.595606z" fill="#d81e06" p-id="1291"></path></svg>
                <span class="title">热搜企业></span>
                <el-row :gutter="12">
                    <el-col :span="8" v-for="item,index in company" :key="index">
                        <p class="company" @click="handleClick(item)"><span class="number" :class="[{'num1':index == 0},{'num2':index == 1},{'num3':index == 2}]">{{index+1}}</span><span>{{item.name}}</span></p>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script>
import {getCbInfo,getHistory,qyxxLikeQuery} from '@/api/portay'
    export default {
        data() {
            return {
                value:'',
                company:[],
                restaurants: [],
                timeout:  null
            }
        },
        created() {
            this.init();
        },
        methods: {
            querySearchAsync(queryString, cb) {
                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    if(queryString){
                        qyxxLikeQuery({field:queryString.trim()}).then(res=>{
                            this.restaurants = res.data.map(item=>{
                                return {value:item.qymc+'（'+item.shtyxydm+'）',shtyxydm:item.shtyxydm,qymc:item.qymc}
                            });
                            cb(this.restaurants);
                        })
                    }
                }, 1000 * Math.random());
            },
            //查询历史列表
            init(){
                getHistory().then(res=>{
                    if(res.status){
                        this.company = res.data.map(item=>{
                            return {name:item}
                        })
                    }
                })
            },
            //点击查询
            handleSearch(item){
                let feilds;
                if(item.qymc){
                    this.value = item.qymc;
                    feilds = item.shtyxydm;
                }else{
                    feilds = this.value.trim();
                    if(!feilds)return
                }
                getCbInfo({feilds}).then(res=>{
                    if(res.status){
                        let comInfo = res.data;
                        sessionStorage.setItem('comInfo',JSON.stringify(comInfo))
                        this.$router.push({ path: '/portray1/companyMessage'});
                    }else if(res.code != '401' && !(res.status)){
                        this.$message({
                            message: `${res.msg}`,
                            type: 'warning'
                        });
                    }
                })
            },
            //点击历史项
            handleClick(item){
                let feilds = item.name;
                getCbInfo({feilds}).then(res=>{
                    if(res.status){
                        let comInfo = res.data;
                        sessionStorage.setItem('comInfo',JSON.stringify(comInfo))
                        this.$router.push({ path: '/portray1/companyMessage'});
                    }else if(res.code != '401' && !(res.status)){
                        this.$message({
                            message: `${res.msg}`,
                            type: 'warning'
                        });
                    }
                })
            },
        }
    }
</script>

<style scoped="scoped" lang="scss">
.main{
    margin-top: 100px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .search{
        margin-top: 30px;
        width: 720px;
        /deep/ .el-input-group__append, .el-input-group__prepend{
            background-color: #4285f4;
            color: #fff;
            border: none;
        }
        /deep/ .el-input-group__append, .el-input-group__prepend:hover{
            cursor: pointer;
        }
        /deep/ .autocomplete .el-input__inner{
            border:1px solid #4285f4;
        }
    }
    .history{
        margin-top: 40px;
        width: 720px;
        height: 22px;
        line-height: 22px;
        .title{
            display: inline-block;
            margin-left: 10px;
            margin-bottom: 16px;
            font-weight: 900;
        }
        .company{
            height: 40px;
            width: 100%;
            overflow:hidden;
	        text-overflow:ellipsis;
	        white-space:nowrap;
            line-height: 40px;
            margin: 0;
            padding: 0;
            color: #999999;
            font-size: 16px;
            &:hover{
                cursor: pointer;
            }
            .number{
                display: inline-block;
                margin-right: 10px;
            }
            .num1{
                color: #e46565;
            }
            .num2{
                color: #f17458;
            }
            .num3{
                color: #ebb848;
            }
        }
    }
}
</style>
